import React from 'react';
import './SplitPanel.css';

class BorderPanel extends React.Component {
    render() {
        return (
            <div className={'FancyBorder FancyBorder-' + this.props.color}>{this.props.children}</div>
        )
    }
}

class BorderPanelNew extends React.Component {
    render() {
        return (
            <div className={'FancyBorder FancyBorder-' + this.props.color}>
                <h1 className="Dialog-title">
                    {this.props.title}
                </h1>
                <p className="Dialog-message">
                    {this.props.content}
                </p>
                <div>{this.props.left}</div>
                <div>{this.props.right}</div>
            </div>
        )
    }
}

class SplitPanel extends React.Component {

    render() {
        return (
            <div>
                <BorderPanel color={'blue'}>
                    <h1 className="Dialog-title">
                        Welcome
                    </h1>
                    <p className="Dialog-message">
                        Thank you for visiting our spacecraft!
                    </p>
                </BorderPanel>
                <BorderPanelNew color={'blue'} title={'Welcome'} content={'Thank you for visiting our spacecraft!'} left={
                    <div>
                        <label>姓名: <input type="number" name="phone"/></label>
                    </div>
                } right={
                    <div>
                        <label>密码: <input type="password" name="password"/></label>
                    </div>
                }/>
            </div>
        );
    }
}

export default SplitPanel;